<template>
  <div>
    <div class="ta-c c-gray bg-gray fs-5" style="padding: 8px;">{{createdAtName}}</div>
    <div class="pd">
      <div class="weui-flex v-mdl">
        <div style="width: 40px;">
          <avatar v-if="avatarUrl" :src="avatarUrl"></avatar>
        </div>
        <div class="weui-flex__item pdl-s">
          <div class="cf">
            <div class="fl">
              <span class="fw">{{nickName}}&nbsp;&nbsp;</span>
              <span class="tag info" v-if="role == 'tearch'">老师</span>
              <span class="tag warning" v-if="role == 'student'">学生</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="title" class="c-dark pdt fs-3 fw">{{title}}</div>
      <div v-if="expireAtName" class="pdt c-gray fs-4">
        截止时间：{{expireAtName}}
        <div style="border-bottom: 1px dashed #ddd;" class="pdb"></div>
      </div>
      <div v-for="(n, i) in dataBlocks" v-if="n && n.id && n.type == 'text'" :key="i" class="pdt">
        <text>{{n.value}}</text>
      </div>
      <div class="pdt-l">
        <div v-for="(n, i) in dataBlocks" :key="i" v-if="n && n.id">
          <div v-if="n.type == 'image'" class="mgb"><image-player :path="n.key"></image-player></div>
          <div v-if="n.type == 'audio'" class="mgb" style="position: relative;">
            <span style="position: absolute;top: -3px;left: 0;" class="c-primary fw fs-5">{{n.idx}}</span>
            <audio-player :path="n.key" :size="n.size" :duration="n.meta.duration"></audio-player>
          </div>
          <div v-if="n.type == 'video'" class="mgb"><video-player :path="n.key" :cover-pic-path="n.meta && n.meta.coverPicKey ? n.meta.coverPicKey : ''"></video-player></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import AudioPlayer from '@/components/audio-player'
import ImagePlayer from '@/components/image-player'
import VideoPlayer from '@/components/video-player'
import * as _helper from '@/utils/helper'
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    avatarUrl: [String],
    title: [String],
    blocks: [Array],
    nickName: [String],
    createdAt: {
      type: String,
      default: ''
    },
    expireAt: {
      type: String,
      default: ''
    },
    role: [String],
    label: {
      type: String,
      default: '要求'
    }
  },
  components: {
    AudioPlayer,
    VideoPlayer,
    ImagePlayer,
    Avatar,
  },
  computed: {
    ...mapGetters([
      'isModel'
    ]),
    createdAtName () {
      if (!this.createdAt) return ''
      return _helper.timeName(this.createdAt)
    },
    expireAtName () {
      if (!this.expireAt) return ''
      return _helper.timeName(this.expireAt)
    },
    dataBlocks () {
      let t = []
      let count = 1
      this.blocks.forEach(n => {
        n.idx = 0
        if (n.type === 'audio') {
          n.idx = count++
        }
        t.push(n)
      })
      return t
    }
  },
}
</script>
